<template>
    <!-- 拔尖贵仪 -->
    <div class="paper-container">
        <!-- 首页 -->
        <div class="page-div doc">
            <div class="front-page">
                <h1 id="title">
                    厦门大学拔尖学生贵重实验仪器设备开放<br />
                    创新基金申报书
                </h1>
                <table>
                    <tr v-for="(field, index) in [
                        { label: '学院', value: basicInfo.BelongDepartName },
                        { label: '项目名称', value: basicInfo.ProjectName },
                        { label: '负责人', value: basicInfo.ProjOwner },
                        { label: '联系方式', value: basicInfo.ProjOwnerMobile },
                        { label: '指导教师', value: basicInfo.GuideTeacher },
                        { label: '职称', value: basicInfo.GuideTeacherTitle },
                        { label: '学历', value: basicInfo.GuideTeacherEducation },
                        { label: 'E-mail', value: basicInfo.GuideTeacherEmail},
                        { label: '项目申请日期', value: dayjs(basicInfo.ApplyStartDate).format('YYYY年M月D日') },
                        { label: '项目起止年月', value: `${dayjs(basicInfo.ApplyStartDate).format('YYYY年M月')} 至 ${dayjs(basicInfo.ApplyEndDate).format('YYYY年M月')}` }
                        ]" :key="index">
                        <th>{{ field.label }}：</th>
                        <td>{{ field.value }}</td>
                    </tr>
                </table>
                <div class="office-sign">
                    厦门大学教务处<br />
                    厦门大学实验室与设备管理处<br />
                    二〇二四年
                </div>
            </div>
        </div>

        <!-- 填写说明 -->
        <div class="page-div doc">
            <div class="rule-page" id="rule-page">
                <h2>填写说明</h2>
                <ul>
                    <li>
                        1、本申请书所列各项内容均须实事求是，认真填写，表达明确严谨，简明扼要，申报书请按顺序逐项填写，填写内容必须实事求是，空缺项要填“无”。
                    </li>
                    <li>
                        2、申请人可以是个人，也可为创新团队，首页只填主持人。
                    </li>
                    <li>
                        3、本申请书为大16开本（A4），左侧装订成册。可网上下载、自行复印或加页，但格式、内容、大小均须与原件一致。填写完后用A4纸张双面打印，不得随意涂改。
                    </li>
                    <li>
                        4、主持人所在学院认真审核，经初评和答辩，签署意见后，将申请书（一式两份）报送教务处。
                    </li>
                </ul>
            </div>
        </div>
        
        <!-- 申报书内容 -->
        <div class="page-div doc">
            <!-- 一、基本情况 -->
            <DocSection class="info-section" title="一、基本情况" id="info-section">
                <table>
                    <colgroup>
                        <col style="width: 12%" />
                        <col style="width: 88%" />
                    </colgroup>
                    <tr>
                        <th>项目名称</th>
                        <td>{{ basicInfo.ProjectName }}</td>
                    </tr>
                    <tr>
                        <th>所属学科</th>
                        <td>{{ basicInfo.Speciality }}</td>
                    </tr>
                </table>
                <table>
                    <colgroup>
                        <col style="width: 12%" />
                        <col style="width: 31%" />
                        <col style="width: 19%" />
                        <col style="width: 38%" />
                    </colgroup>
                    <tr class="no-top">
                        <th>申请金额</th>
                        <td>{{ basicInfo.ApplyAmount+'元' }}</td>
                        <th>起止年月</th>
                        <td>{{ `${dayjs(basicInfo.ApplyStartDate).format('YYYY年M月')} 至 ${dayjs(basicInfo.ApplyEndDate).format('YYYY年M月')}` }}</td>
                    </tr>
                </table>
                <table>
                    <colgroup>
                        <col style="width: 12%" />
                        <col style="width: 88%" />
                    </colgroup>
                    <tr class="no-top">
                        <th>申请进入实验室</th>
                        <td>#TODO</td>
                    </tr>
                </table>
                <table>
                    <colgroup>
                        <col style="width: 12%" />
                        <col style="width: 21%" />
                        <col style="width: 10%" />
                        <col style="width: 9%" />
                        <col style="width: 10%" />
                        <col style="width: 9%" />
                        <col style="width: 15%" />
                        <col style="width: 14%" />
                    </colgroup>
                    <tr class="no-top">
                        <th>主持人姓名</th>
                        <td>{{ basicInfo.ProjOwner }}</td>
                        <th>性别</th>
                        <td>{{ basicInfo.ProjOwnerGender }}</td>
                        <th>民族</th>
                        <td>{{ basicInfo.ProjOwnerEthnic }}</td>
                        <th>出生年月</th>
                        <td>{{ dayjs(basicInfo.ProjOwnerBirthday).format('YYYY年M月') }}</td>
                    </tr>
                </table>
                <table>
                    <colgroup>
                        <col style="width: 12%" />
                        <col style="width: 21%" />
                        <col style="width: 10%" />
                        <col style="width: 19%" />
                        <col style="width: 19%" />
                        <col style="width: 19%" />
                    </colgroup>
                    <tr class="no-top">
                        <th>学号</th>
                        <td>{{ basicInfo.ProjOwnerCode }}</td>
                        <th>身份</th>
                        <td>□强基 □拔尖</td>
                        <th>联系电话</th>
                        <td>{{ basicInfo.ProjOwnerMobile }}</td>
                    </tr>
                </table>
                <table>
                    <colgroup>
                        <col style="width: 12%" />
                        <col style="width: 21%" />
                        <col style="width: 10%" />
                        <col style="width: 57%" />
                    </colgroup>
                    <tr class="no-top">
                        <th>指导老师</th>
                        <td>{{ basicInfo.GuideTeacher+otherTeachers }}</td>
                        <th>联系电话</th>
                        <td>{{ basicInfo.GuideTeacherMobile }}</td>
                    </tr>
                </table>
                <table class="case-table">
                    <colgroup>
                        <col style="width: 26%" />
                        <col style="width: 74%" />
                    </colgroup>
                    <tr class="no-top">
                        <th>主持人曾经参与科研的情况</th>
                        <td>{{ extInfo.ManagerSciResearche }}</td>
                    </tr>
                    <tr>
                        <th>指导教师承担科研课题情况</th>
                        <td>{{ extInfo.GuideTeacherSciResearch }}</td>
                    </tr>
                    <tr>
                        <th>指导教师对本项目的支持情况</th>
                        <td>{{ extInfo.GuideTeacherSupport }}</td>
                    </tr>
                </table>
                <table class="member-table">
                    <colgroup>
                        <col style="width: 8%" />
                        <col style="width: 18%" />
                        <col style="width: 15%" />
                        <col style="width: 20%" />
                        <col style="width: 16%" />
                        <col style="width: 23%" />
                    </colgroup>
                    <tr class="no-top">
                        <th :rowspan="members.length+2" class="dir-vertical">项目组主要成员</th>
                        <th>姓名</th>
                        <th>学号</th>
                        <th>专业班级</th>
                        <th>所在学院</th>
                        <th>项目中的分工</th>
                    </tr>
                    <tr>
                        <td v-for="(field, index) in ['ProjOwner', 'ProjOwnerCode', 'ProjOwnerMajor', 'ProjOwnerDepartment']" :key="index">
                            {{ basicInfo[field] }}
                        </td>
                        <td>负责人</td>
                    </tr>
                    <tr v-for="(member, index) in members" :key="index">
                        <td v-for="(field, index) in ['RealName', 'Code', 'Major', 'Department', 'Division']" :key="index">
                            <span v-if="member[field]">{{ member[field] }}</span>
                            <div v-else></div>
                        </td>
                    </tr>
                </table>
            </DocSection>

            <!-- 二、项目简介 -->
            <DocSection class="intro-section" title="二、项目简介（限200字以内）" :with-outline="true" id="intro-section">
                <div class="min100px">{{ extInfo.ProjectIntro }}</div>
            </DocSection>

            <!-- 三、立项依据 -->
            <DocSection class="basis-section" title="三、立项依据" :with-outline="true" id="basis-section">
                <div v-html="extInfo.ProjectBasis"></div>
            </DocSection>

            <!-- 四、经费预算 -->
            <DocSection class="butget-section" title="四、经费预算" id="butget-section">
                <BudgetSection :data />
            </DocSection>

            <!-- 意见 -->
            <DocSection v-for="(section, index) in [
                    { name: 'GuideTeacherOpinion', title: '五、指导教师意见', sign: '导师（签章）：', id: 'guide-teacher-opinion'},
                    { name: 'RecoExpertOpinion', title: '六、推荐专家意见', sign: '推荐专家（签章）：', id: 'reco-expert-opinion'},
                    { name: 'ColExpertOpinion', title: '七、学院专家组意见', sign: '专家组组长（签章）：', id: 'college-expert-opinion'},
                    { name: 'ColOpinion', title: '八、学院意见', sign: '分管院领导（签章）：', id: 'college-opinion'},
                    { name: 'UniExpertOpinion', title: '九、学校专家组意见', sign: '专家组组长（签章）：', id:'school-expert-opinion'},
                    { name: 'UniApprovalOpinion', title: '十、学校审批意见', sign: '负责人（签章）：', id:'school-opinion'}
                ]" :key="index" class="advice-section" :title="section.title" :with-outline="true" :withSign="section.sign" :id="section.id">
                {{ extInfo[section.name] }}
            </DocSection>
        </div>
    </div>
    <DocNav class="doc-nav" :projectType="basicInfo.ProjectType"></DocNav>
</template>

<script setup>
import dayjs from 'dayjs';
import DocSection from '@/modules/projects/components/doc-section.vue';
import BudgetSection from '@/modules/projects/components/budget-section.vue';
import DocNav from '@/modules/projects/components/doc-nav.vue';

const props = defineProps({
    data: Object
})

const readonly = true;
const basicInfo = props.data.basicInfo;
const extInfo = props.data.extInfo;
const members = [
    ...props.data.members,
    ...Array.from({ length: Math.max(4 - props.data.members.length, 0) }, () => ({}))
]
const otherTeachers = props.data.otherTeachers && props.data.otherTeachers.length !== 0 ? '（' + props.data.otherTeachers.map(teacher => teacher.RealName).join('、') + '）' : '';
</script>

<style lang="less" scoped>
@import "@/assets/less/paper/doc.less";
</style>